<template >
    <div class="disctrict">
        <div class="header">
            <vue-header>
                <a href="JavaScript;:" slot="left" class="el-icon-arrow-left fl left"></a>
                <span class="fl middle" slot="middle">{{city}}</span>
                <router-link to="/address" slot="right" class="fr right">切换城市</router-link>
            </vue-header>
        </div>
        <div class="input">
            <input type="text" placeholder="输入学校、商务楼、地址" v-on:input="changeAddress">
            <ul>
                <li v-for="item in shop">
                      <router-link to="/square"></router-link>
                </li>
            </ul>
        </div>

    </div>
    
</template>
<script>
    import header from "../common/header/header.vue"
    import Vue from 'vue'     
    export default {
        name: "disctrict",
        components: {
            "vue-header": header
        },
        data ()  {
            return {
                city: "",
               
            }
        },
        methods: {
            changeAddress: () => {
                console.log("chulai");
            }
        },
        created ()  {
            var _this = this;
            _this.city = this.$route.params.city;
            console.log(_this.city);
            var user = localStorage.getItem("user");
            console.log(user);
        },
         
    }
</script>
<style lang="less" scoped>
    .disctrict {
        .header {
            .el-icon-arrow-left {
                line-height: 30px;
            }
            .middle {
                 width: 100%;
                 padding: 0 60px;
                 box-sizing: border-box;
                 margin: 0px;
             }
             .left {
                 position: absolute;
                 top: 0px;
                 left: 0px;
                 height: 30px;
                 width: 60px;
                 margin: 0px;
             }
             .right {
                 position: absolute;
                 top: 0px;
                 right: 20px;
                 height: 30px;
                 width: 60px;
                margin: 0px;
                text-align: center;
             }
        }
        .input {
            input {
                width: 100%;
                border: none;
                border: 1px solid #eee;
                height: 30px;
                line-height: 30px;
                padding-left: 0.2rem;
            }
        }   
    }
</style>